<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>保存输入文字</title>
	</head>
	<style>
		a{
				text-decoration: none; 
		}
		.bs{
			color: black;
		}
		.header{
			background-color: deepskyblue;
			width: 100%;
			height: 75px;
		}
		.backcolor{
			font-size: 24px;
			align-content: center;
		}
		.cs{
			color: white;
			font-size: 24px;
		}
		.cs:hover{
			color: black;
		}
		.inputbox{
			width: 99%;
			height: 75px;
		}
		input{
			font-size: 32px;
		}
		.bcc{
			font-size: 32px;
			background-color: deepskyblue;
			color: white;
		}
		.bcc:hover{
			background-color: black;
		}
		.bbcc{
			width: 100%;
			height: 75px;
			background-color: deepskyblue;
			color: white;
		}
		.bbcc:hover{
			background-color: black;
		}
		.beijin{
			background-color: deepskyblue;
			color: white;
			width: 100%;
			height: 75px;
		}
		.beijin:hover{
			background-color: black;
		}
		
	</style>
	<body>
		<div class="header">
			<br />
			<div class="backcolor">
				<a href="#" class="bs">测试1</a>
				&nbsp;
				<a href="#" class="cs">测试2</a>
				&nbsp;
				<a href="#" class="cs">测试3</a>
				&nbsp;
				<a href="#" class="cs">测试4</a>
				&nbsp;
				<a href="#" class="cs">测试5</a>
				&nbsp;
				<a href="#" class="cs">测试6</a>
				&nbsp;
				<a href="#" class="cs">测试7</a>
				&nbsp;
			</div> 
		</div>
		<br />
		
		<input type="text" id="inputBox" class="inputbox">
		<br /><br />
		<div class="beijin">
		<button onclick="saveInput()" class="bbcc">保存</button>
		</div>
		<div class="beijin">
		<div id="outputDiv" class="bcc">
			<p>输入后的内容将会在本模块中呈现</p>
		</div>
		</div>
		<div class="beijin">
			<p>这是一个空白的测试模块</p>
		</div>
		<div class="beijin">
			<p>测试2</p>
		</div>
		<br />
		<div>
			<audio controls autoplay loop class="beijin">
				<source src="dyhzx.mp3" type="audio/mp3">
				<source src="dyhzx.mp3" type="audio/ogg">
			</audio>
		</div>
		<br />
		<div class="beijin">
			<a href="#" class="cs">本网站由1209369353@qq.com制作</a>
		</div>
		<script>
		function saveInput() {
		  var input = document.getElementById("inputBox").value;
		  var outputDiv = document.getElementById("outputDiv");
		  outputDiv.innerHTML = input;
		}
		</script>
	</body>
</html>
